<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script src="https://cdn.staticfile.org/jquery/1.10.2/jquery.min.js"></script>
    <style>
        .regist{
            width: 600px;
            height: 400px;
            box-shadow: 0 0 4px #333;
            margin: 100px auto;
            position: relative;
        }
        .login{
            width: 600px;
            height: 400px;
            box-shadow: 0 0 4px #333;
            margin: 100px auto;
            position: relative;
        }
        ul{
            list-style: none;
            width: 600px;
            height: 300px;
            position: absolute;
            margin: 60px;
        }
        li{
            margin-top: 10px;
            height: 40px;
            line-height: 0px;
            display: flex;
            }
        input{
            width: 60%;
            height: 30px;
        }
        button{
            width: 140px;
            height: 40px;
            background-color: rgb(225 228 222);
            border-radius: 20px;
            border: none;
            outline-style: none;
            margin: 20px 180px; 
        }
    </style>
</head>
<body>
<div id="app">
</div>
<script>

let regist = {
        template:`
        <div class="regist" >
            <ul>
                <li>
                    <h4>姓名：</h4>
                    <input v-model="name" ref="name"  type="text" placeholder="请输入用户名">
                </li>
                <li>
                    <h4>密码：</h4>
                    <input v-model="pass" type="password" placeholder="请输入密码">
                </li>
                
                <button @click="Submit">注册</button>
            </ul>
        </div>`,
        data(){
            return {
                name:'',
                pass:''
            }
        },
        methods:{
            Submit(){
                    $.ajax({
                        url:'http://localhost:3000/regist',
                        method:'POST',
                        data:{
                            username:this.name,
                            password:this.pass
                        },
                        success: function( res ){
                            console.log('res===>',res)
                            if(res.success){
                                alert(res.message)
                            }else{
                                alert(res.message)
                            }
                        },
                        error: function( err ){
                            console.log('err===>',err)
                            alert(res.success)
                        }
                    })
            }
        }
    }

    let login = {
        template:`
        <div class="login">
            <ul>
                <li>
                    <h4>姓名：</h4>
                    <input  v-model="name" ref="name" @blur="change()" type="text" placeholder="请输入用户名">
                </li>    
                <li>
                    <h4>密码：</h4>
                    <input  v-model="pass" ref="password" @blur="change()" type="password" placeholder="请输入密码">
                </li>    
            </ul>
            <button @click="login">登陆</button>
        </div>`,
        data(){
            return {
                name:'',
                pass:'',
            }
        },
        methods:{
            change(){console.log(this.$refs.name.value)},
            login(){
                $.ajax({
                    url:'http://localhost:3000/user/login',
                    method:'POST',
                    data:{
                        username:this.name,
                        password:this.pass,
                    },
                    success: function( res ){
                        console.log('res===>',res)
                        if(res.success){
                            alert('登陆成功')
                        }else{
                            alert(res.message)
                        }
                    },
                    error: function( err ){
                        console.log('err===>',err)
                        console.log('用户名密码输入不正确')
                    }
                })
            }
        }
    }
    new Vue({
        render:function(h){
            return h(regist)
        }
    }).$mount('#app')
</script>
</body>
</html>